<template>
  <div id="app">
    <div class="top-nav" v-show="show">
      <router-link tag="div" class="nav-item" to="/home">悦读</router-link>
      <router-link tag="div" class="nav-item" to="/catoon">追番</router-link>
      <router-link tag="div" class="nav-item" to="/hot">最热</router-link>
      <router-link tag="div" class="nav-item" to="/watch">追剧</router-link>
      <router-link tag="div" class="nav-item" to="/select">精选</router-link>
      <router-link tag="div" class="nav-item" :to="{name: 'user', params: { name: userid } }">用户</router-link>
      
    </div>

    <div class="back-item" v-show="show == false">
      <router-link tag="div" class="back-item-list" to="/background"
        >悬疑推理</router-link
      >
      <router-link tag="div" class="back-item-list" to="/love"
        >甜涩恋爱</router-link
      >
      <router-link tag="div" class="back-item-list" to="/supernatural"
        >恐怖悬疑</router-link
      >
      <router-link tag="div" class="back-item-list" to="/around"
        >身边事儿</router-link
      >
      <router-link tag="div" class="back-item-list" to="/science"
        >科幻架空</router-link
      >
    </div>
    <transition :name="transitionName">
     
      <router-view></router-view>
    
    </transition>

    <div class="bottom-nav">
      <router-link tag="div" :class="{bc : show==true}"  @click.native="show=true" class="nav-item" to="/home">
        首页</router-link
      >

      <router-link tag="div" :class="{bc : show==false}" @click.native="show=false" class="nav-item" to="/background">
       广场</router-link
      >

    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { transitionName: null, show: true };
  },
 
  computed:{
    userid(){
      return JSON.parse(localStorage.getItem('user'))
    }
    
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },

  methods: {
    showthis() {
      this.show = !this.show;
      // console.log(this.show);
    },
  },
};
</script>

<style lang="scss" scoped>

.back-item,
.top-nav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 55px;
  background-color: #fff;
  text-align: center;
  line-height: 55px;
  font-size: 18px;
  color: black;

  .back-item-list,
  .nav-item {
    flex: 1;

    &.router-link-exact-active {
      color: rgb(12, 237, 237);
      border-bottom: 6px solid aqua;
      transition: all 0.2s linear;
    }
  }
}

.back-item{
  width: 80vw;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.2s linear;
}

.slide-right-enter {
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  transform: translate3d(100%, 0, 0);
}

.slide-right-enter-to {
  transform: translate3d(0, 0, 0);
}

.slide-left-enter {
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  transform: translate3d(-100%, 0, 0);
}

.slide-right-enter-to {
  transform: translate3d(0, 0, 0);
}

.bottom-nav {
  display: flex;
  position: fixed;
  text-align: center;
  z-index: 400;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 55px;
  background-color: rgb(161, 151, 151);

  .nav-item {
    flex: 1;
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    border: 1px solid rgb(124, 120, 120);
    color:rgb(33, 66, 55);

    &.bc{
      color: white;
      background-color: rgb(142, 196, 221);
    }
  }
}
</style>
